<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: seagreen;
        }

        /* ***1*** */
        /* main {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        } */
        /* ***2*** */
        /* main {
            width: 18em;
            padding: 1em 1.5em;
            margin: 50% auto 0;
            transform: translateY(-50%);
        } */
        /* ***3*** */
        /* body {
            display: flex;
            min-height: 100vh;
            margin: 0;
        }

        main {
            margin: auto;
        } */

        /* ***4*** */
        main {
            display: flex;
            align-items: center;
            align-self: center;
            justify-content: center;
            width: 18em;
            height: 10em;
        }
    </style>
</head>

<body>
    <main>
        <h1>Am I centered yet?</h1>
        <p>Center me, please!</p>
    </main>
</body>

</html>